<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <ul>
      <li @click="componentId='home'">首页</li>
      <li @click="componentId='fenlei'">分类</li>
    </ul>
    <div id="show">
      <!-- vue提供的内容组件 来进行动态组件加载 -->
      <!-- :is="组件名" -->
      <component :is="componentId"></component>
    </div>
  </div>
  <!-- 首页组件的模板 -->
  <template id="home">
    <div>
      <h1>{{hdata}}</h1>
    </div>
  </template>
  <!-- 分类页面的模板 -->
  <template id="fenlei">
    <div>
      <h1>{{fdata}}</h1>
    </div>
  </template>
  <script src="./vue.js"></script>
  <script>
    // 首页组件
    Vue.component("home", {
      template: "#home",
      data() {
        return {
          hdata: "首页的数据"
        }
      }
    })
    // 分类组件
    Vue.component("fenlei", {
      name: "fenlei",
      template: "#fenlei",
      data() {
        return {
          fdata: "分类的数据"
        }
      }
    })
    // 管理app的实例
    var vm = new Vue({
      name: "myapp",
      data() {
        return {
          componentId: 'home' //组件名的动态数据
        }
      }
    }).$mount("#app")


  </script>
</body>

</html>